<ui:composition template="/WEB-INF/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <ui:define name="head">
        <title>#{calendarBean.calendar.owner} Calendar</title>
        <f:metadata>
            <f:viewParam name="username" value="#{calendarBean.username}" />
            <f:viewAction action="#{calendarBean.loadCalendar()}" />
        </f:metadata>
    </ui:define>
    <ui:define name="content">
        <h1>Calendar of #{calendarBean.calendar.owner.username}</h1>
        <p:outputPanel rendered="#{calendarBean.calendar.public}">
            <p:dataScroller value="#{calendarBean.upcomingEvents}" var="event" chunkSize="20">
                <p:outputPanel rendered="#{event.public}">
                    <h:panelGrid columns="2">
                        <p:outputLabel value="#{event.date.toLocaleString()}" />
                        <p:link outcome="eventDetails" value="#{event.name}" >
                            <f:param name="id" value="#{event.eventId}" />
                        </p:link>
                    </h:panelGrid>
                </p:outputPanel>
            </p:dataScroller>
        </p:outputPanel>
        <p:outputPanel rendered="#{calendarBean.calendar.private}">
            <p:outputLabel value="Sorry, you cannot see the calendar of this user as it is private." />
        </p:outputPanel>
    </ui:define>
</ui:composition>